<template>
	<view class="pageBox">
		<view class="swiperBox2">
			<swiper class="swiper2" circular :autoplay="true" :interval="3000" :indicator-dots="true">
				<swiper-item v-for="item in swiperList" :key="item.id">
					<image class="swiper2Img" :src="item.src">
					</image>
				</swiper-item>
			</swiper>
		</view>

		<view class="topTabs2 flex-between">
			<scroll-view :scroll-x="true" style="width:690rpx;">
				<view class="topTabsLeft2 flex-row">
					<view class="topTab2 flex-center" v-for="item in tabsList" :key="item.id" @click="onTab(item)">
						<view class="topTabText3">
							{{ item.title }}
						</view>
						<image class="tabLine2" src="http://www.bobei.shop/static/third/tabLine.png" mode=""
							v-if="item.status">
						</image>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="list">
			<view class="listItem flex" v-for="item in list" :key="item.id" @click="goSpikeDetails(item)">
				<image class="thumb" :src="item.goods.thumbUrl" v-if="item.goods"></image>
				<view class="listItemR" v-if="item.goods">
					<view class="stateBox flex">
						<view class="state">
							<image class="stateImg" src="http://www.bobei.shop/static/third/stateBg.png" v-if="type != 4">
							</image>
							<image class="stateImg" src="http://www.bobei.shop/static/third/stateBg2.png"
								v-if="type == 4"></image>
							<view class="stateText" v-if="type == 2 || type == 1">
								秒杀中
							</view>
							<view class="stateText" v-if="type == 3">
								即将开场
							</view>
							<view class="stateText" v-if="type == 4">
								已结束
							</view>
						</view>
						<!-- <view class="name">
							miumiu
						</view> -->
					</view>

					<view class="title oneHidden">
						{{ item.goods.title }}
					</view>

					<view class="planBox flex-row">
						<view class="progress">
							<view class="block" :style="{width: item.percent}"></view>

							<view class="progressText" v-if="type == 2 || type == 1">
								正在疯抢中
							</view>
							<view class="progressText" v-if="type == 4">
								已结束
							</view>

							<view class="countdown flex-row" v-if="type == 3">
								倒计时:<uni-countdown :showDay="false" :hour="item.time_h" :minute="item.time_m"
									:second="item.time_s">
								</uni-countdown>
							</view>

						</view>
						<view class="robbed">
							库存{{ item.goods.total }}件
						</view>
					</view>

					<view class="priceBox flex-row">
						<view class="price">
							¥{{ item.goods.marketprice }}
						</view>
						<view class="sale">
							已售{{ item.goods.sales }}
						</view>
					</view>

					<!-- <scroll-view class="goodsSignScroll" :scroll-x="true">
						<view class="goodsSign flex-row">
							<view class="goodsSignItem2" v-for="(item,index) in 3" :key="index">
								每人限购3件
							</view>
						</view>
					</scroll-view> -->
				</view>

				<!-- <view class="listItemMask flex-center" v-if="type == 4" @click.stop="onMask">
					已结束
				</view> -->
			</view>
		</view>
		<uni-load-more :status="listStatus"></uni-load-more>
	</view>
</template>

<script>
	import uniCountdown from "../uni_modules/uni-countdown/components/uni-countdown/uni-countdown.vue";
	export default {
		components: {
			"uni-countdown": uniCountdown,
		},
		data() {
			return {
				swiperList: [],

				tabId: "",
				tabText: "",
				tabsList: [],
				type: 0, // 4已结束不让点击 3即将开场 2进行中 1已开抢

				blockWidth: "7%",

				list: [],
				form: {
					page: 1,
					lastId: 0,
				},
				loading: false,
				finished: false,
			}
		},
		onShow() {
			this.getSwiperList();
			this.getTabsList();
		},
		onReachBottom() {
			this.getList();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			}
		},
		methods: {
			getSwiperList() {
				this.$post({
					module: 'Content',
					interface: '1000',
					data: {
						position_id: "13"
					},
				}).then(res => {
					this.swiperList = res.list;
				})
			},
			getTabsList() {
				this.$post({
					url: "/portal/Spike",
					module: 'Spike',
					interface: '3000',
				}).then(res => {
					res.list.forEach((item, index) => {
						if (index == 0) {
							item.status = true;
							item.title = item.typeText;
							this.tabId = item.id;
							this.type = item.type;
							this.tabText = item.typeText;
						} else {
							item.status = false;
							item.title = item.typeText;
						}
					})
					this.tabsList = res.list;

					this.$nextTick(() => {
						this.refresh();
					})
				})
			},
			onTab(param) {
				this.tabId = param.id;
				this.tabText = param.title;
				this.tabsList.forEach((item) => {
					item.status = false;
					if (param.id == item.id) {
						this.type = item.type;
						item.status = true;
					}
				})
				this.refresh();
			},
			goSpikeDetails(param) {
				uni.navigateTo({
					url: '/home/spikeDetails?id=' + param.id + '&seckill=seckill'
				})
			},
			onMask() {
				return;
			},
			getList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					url: "/portal/Spike",
					module: 'Spike',
					interface: '1000',
					data: {
						spike_times: this.tabId,
						...this.form,
					},
				}).then(res => {
					res.list.forEach((item) => {

						if (this.type == 4) { // 已结束
							item.percent = "100%";
						} else if (this.type == 3) { // 即将开场
							item.percent = "7%";
						} else if (this.type == 2 || this.type == 1) { // 进行中 开抢中 计算进度条
							item.percent = parseInt(item.goods.sales / item.goods.total * 100) + "%";
						}


						let time = this.getHMS(item.end_timestamp);
						item.time_h = Number(time.h);
						item.time_m = Number(time.m);
						item.time_s = Number(time.s);
					})
					this.list = this.list.concat(res.list);
					// console.log(this.list)
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
			refresh() {
				this.list = [];
				this.form.page = 1;
				this.form.lastId = 0;
				this.loading = false;
				this.finished = false;
				this.getList();
			},
			// 毫秒级时间戳转换时分秒
			getHMS(timestamp) {
				let date = timestamp * 1000;
				let now = new Date().getTime();
				let times = date - now;
				let seconds = Math.floor(times / 1000);
				let minutes = Math.floor(seconds / 60);
				let hours = Math.floor(minutes / 60);
				minutes %= 60;
				seconds %= 60;
				let h = hours;
				let m = minutes.toString().padStart(2, '0');
				let s = seconds.toString().padStart(2, '0');
				return {
					h,
					m,
					s
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		.swiperBox2 {
			width: 100%;
			margin-bottom: 22rpx;

			.swiper2 {
				width: 100%;
				height: 358rpx;

				.swiper2Img {
					width: 100%;
					height: 358rpx;
				}

				/deep/.uni-swiper-dot {
					width: 6rpx;
					height: 6rpx;
					border-radius: 50%;
				}
			}
		}

		.topTabs2 {
				width: 100%;
				height: 68rpx;
				margin-top: 7rpx;
				padding: 0 30rpx;

				.topTabsLeft2 {
					width: 100%;
				height: 68rpx;
					overflow-x: auto;

					.topTab2 {
						flex-direction: column;
						margin-right: 80rpx;
						height: 68rpx;
						position: relative;

						.topTabText3 {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
							white-space: nowrap;
						}

						.tabLine2 {
							width: 46rpx;
							height: 10rpx;
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translate(-50%, 0);
						}
					}

					.topTab2:nth-last-of-type(1) {
						margin-right: 0;
					}
				}
			}

		.list {
			width: 100%;
			padding: 0 28rpx;
			margin-top: 30rpx;

			.listItem {
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-bottom: 24rpx;
				position: relative;

				.thumb {
					border-radius: 24rpx 0 0 24rpx;
					width: 244rpx;
					height: 248rpx;
				}

				.listItemR {
					width: 450rpx;
					padding: 18rpx;

					.stateBox {
						.state {
							width: 110rpx;
							position: relative;
							padding-left: 4rpx;
							

							.stateImg {
								width: 100%;
								height: 100%;
								position: absolute;
								z-index: 1;
								top: 0;
								left: 0;
							}

							.stateText {
								position: relative;
								z-index: 2;
								font-size: 20rpx;
								font-family: PingFang SC-Semibold, PingFang SC;
								font-weight: 600;
								color: #FBFBFC;
							}
						}

						.name {
							font-size: 20rpx;
							font-family: PingFang SC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
						}
					}

					.title {
						width: 100%;
						font-size: 20rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #999999;
						margin-top: 10rpx;
					}

					.planBox {
						margin-top: 10rpx;

						.progress {
							width: 236rpx;
							height: 16rpx;
							background: #FFFACE;
							border-radius: 10rpx 10rpx 10rpx 10rpx;
							position: relative;

							.block {
								height: 100%;
								background: #F2615F;
								border-radius: 10rpx 10rpx 10rpx 10rpx;
							}

							.progressText {
								font-size: 12rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #999999;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}

							.countdown {
								font-size: 12rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 500;
								color: #999999;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								white-space: nowrap;

								/deep/.uni-countdown__number {
									font-size: 12rpx !important;
									color: #999999 !important;
									width: auto !important;
									height: auto !important;

								}
							}
						}

						.robbed {
							font-size: 12rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 12rpx;
						}

					}

					.priceBox {
						margin-top: 14rpx;

						.price {
							font-size: 24rpx;
							font-family: PingFang SC-Semibold, PingFang SC;
							font-weight: 600;
							color: #F2615F;
						}

						.sale {
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 20rpx;
						}
					}

					.goodsSignScroll {
						width: 414rpx;
					}

					.goodsSign {
						width: 414rpx;
						margin-top: 30rpx;

						.goodsSignItem {
							.goodsSignItemTitle {
								font-size: 20rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: normal;
								color: #A6A5A6;
								white-space: nowrap;
							}

							.goodsSignItemLine {
								width: 2rpx;
								height: 22rpx;
								background-color: #A6A5A6;
								margin: 0 16rpx;
							}
						}

						.goodsSignItem2 {
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #DA93A5;
							padding: 4rpx 6rpx;
							background: #FCEEF3;
							border-radius: 8rpx;
							border: 2rpx solid #F2615F;
							white-space: nowrap;
							margin-right: 12rpx;
						}
					}
				}

				.listItemMask {
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.5);
					font-size: 80rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 3;
				}
			}
		}
	}
</style>
